@font-face {
    font-family: "AktivGrotesk-Light";
    src: url(Fontes/AktivGrotesk-Light.woff) format(Woff),
    url(Fontes/AktivGrotesk-Light.woff2) format(woff2);
}

@font-face {
    font-family: "Denton-Bold";
    src: url(Fontes/Denton-Test-Bold-700.woff) format(Woff),
    url(Fontes/Denton-Test-Bold-700.woff2) format(woff2);
}

@font-face {
    font-family: "Denton-Medium";
    src: url(Fontes/Denton-Test-Medium-500.woff) format(Woff),
    url(Fontes/Denton-Test-Medium-500.woff2) format(Woff2);
}

@font-face {
    font-family: "Denton-Regular";
    src: url(Fontes/Denton-Test-Regular-400.woff) format(Woff),
    url(Fontes/Denton-Test-Regular-400.woff2) format(Woff2);
}

* {
    box-sizing: border-box;
}

/* grid ------------------------ */
.grid {
    display: grid;
    grid-template-columns: repeat(24, 3fr);
    gap: 20px
}

body{
    background-color: #f3f3f6;
    font-size: 1.25rem;
    margin: 0%;
    padding: 0%;
    
}


/* header --------------------- */
header{
    background-image: url(Faul.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 70vh;
}

header h1 {
    /* grid-column: 10 / 15; */
    grid-column: span 24;
    justify-self: center; 
}

h1 {
    color: white;
    font-size: 13.75rem;
    justify-self: center;
    font-family: "Denton-Regular"
}


/* main --------------------- */
/* section 1 --------------------- */
#informação{
    background-color: #F2F1F1;
}

#RD {
    color: rgb(39, 13, 155);
    font-size: 2.5rem;
    margin-top: 10%;
    margin-bottom: 0%;
    margin-left: 3%;
    margin-right: 3%;
}

#Prof {
    color: black;
    font-size: 1.25rem;
    margin-bottom: 7%;
    margin-left: 3%;
}


/* section 2 --------------------- */
.container3 {
    display: flex;
    align-items: stretch;
    background-color: white;
    margin-top: 5%;
    height: 60vh;
}

#imagens1 {
    width: 50%;
    background-image: url(Eu.png);
    background-position: center;
    background-size: cover;
}

#Tigre {
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
}

.text {
    width: 50%;
    padding: 2% 3%;
}

#Segredos h2 {
    color: black;
    font-size: 2.188rem;
    padding-top: 8%;
    padding-bottom: 0%;
    margin: 0%;

}

#Segredos h3 {
    color: black;
    font-size: 1.406rem;
    width: 70%;
    padding-top: 3%;
    padding-bottom: 5%;
    margin: 0%;

}

#ano {
    color: black;
    font-size: 1.25rem;
    padding-top: 15%;
    text-align: justify;
    margin-left: 85%;
}


/* section 3 --------------------- */
.container {
    display: flex;
    align-items: stretch;
    background-color: white;
    height: 60vh;
}

#Anos {
    align-self: center;
    margin-top: 5%;
    margin-bottom: 5%;
}

.text2 {
    width: 50%;
    padding: 2% 3%;
}

#Anos h2 {
    display: flex;
    color: black;
    font-size: 2.188rem;
    justify-content: end;
    padding-bottom: 0%;
    margin-bottom: 0%;
    margin-top: 0%;
}

#Anos h3 {
    display: flex;
    color: black;
    font-size: 1.406rem;
    justify-content: end;
    margin: 0%;
    padding-top: 2%;
}

#Descrição {
    text-align: justify;
    font-size: 1.25rem;
    padding-top: 15%;
}

#Img {
    width: 50%;
    background-image: url(Conceptual.png);
    background-size: cover;
    background-position: bottom;
}

/* footer --------------------- */
footer {
    display: flex;
    justify-content: space-between;
    background-color: white;
    height: 50vh;
}

#footer1 {
    width: 60%;
    flex-direction: column;
    margin-left: 3%;
    margin-top: 0%;
}

#Con {
    font-family: "Denton-Regular";
    font-size: 2.5rem;
}

#email {
    font-family: "Denton-Regular";
    font-size: 1.25rem;
}



#footer2 {
    align-self: flex-end;
}



@media screen and (max-width: 767px) {

    html {
        font-size: 1.2rem;
    }
    header{
        height: 120vh;
    }
    header h1 {
        font-size: 10rem;
    }
    #nome{
        font-size: 2rem;
    }
    button#menu1 {
        margin-top: 6.6%;
        margin-left: 6.6%;
    }
    div.container3 {
        flex-direction: column;
        height: auto;
    }
    div#imagens1 {
        width: auto;
        height: 60vh;
        background-position: top;
    }
    div.text {
        width: auto;
        height: 60vh;
    }
    #pintor {
        padding-top: 5%;
    }
    div.container {
        flex-direction: column;
        height: auto;
   }
   div.text2 {
        width: auto;
        height: 60vh;
   }
   #Recordações {
    padding-top: 5.7%;
}
   div#Cavalo {
        width: auto;
        height: 60vh;
        background-position: top;
   }
   .text3 {
        padding-left: 2%;
    }
   div.container2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 5%;
    }
    #Cosmic {
        width: 100%;
    }
    #Borboletas {
        width: 100%;
    }    
    .text4 {
        height: 40vh;
    }
    #Branco {
        font-size: 12rem;
    }
    footer.flex {
        height: 100vh;
    }
}



@media screen and (min-width: 768px) and (max-width: 1023px) {

    html{
        font-size: 1.2rem;
    }
    header{
        height: 120vh;
    }
    header h1 {
        margin-top: 35vh;
    }
    button#menu1 {
        margin-top: 5.6%;
        margin-left: 5.6%;
    }
    p#Sur1{
        margin-top: 7vh;
    }
    .text4 {
        height: 50vh;
    }
    #Branco {
        align-self: flex-end;
    }
    footer {
        height: 80vh;
    }  
    #lista {
    padding-right: 3%;
    margin-right: 3%;
    }
    div.container3 {
        flex-direction: column;
        height: auto;
    }
    div#imagens1 {
        width: auto;
        height: 55vh;
        background-position: top;
    }
    div.text {
        width: auto;
        height: 55vh;
    }
    #pintor {
        padding-top: 5%;
    }
    div.container {
        flex-direction: column;
        height: auto;
   }
   div.text2 {
        width: auto;
        height: 55vh;
   }
   div#Cavalo {
        width: auto;
        height: 55vh;
        background-position: top;
   }
    #Recordações {
        padding-top: 5.7%;
    }
    div.container2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 5.7%;
    }
    #Cosmic {
        width: 100%;
    }
    #Borboletas {
        width: 100%;
    }    
    h4#Branco {
        font-size: 15rem;
    }
    #nome {
        font-size: 3.5rem;
    }
}